<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* keyframes关键帧 */
			/* @keyframes move {
				from {
					transform: translateX(0px);
				}

				to {
					transform: translateX(1000px);
				}
			} */
			
			/* @keyframes move{
				0%{
					transform: translateX(0px);
				}
				100%{
					transform: translateX(1000px);
				}
			} */
			/* 动画的简单定义 */
			
			@keyframes move{
				/* 其实0状态是可以省略的或者写成空，但是建议写上 */
				/* keyframes可以定义多个状态的变化 */
				/* 里面的百分比必须是整数 */
				/* 里面的百分比就是总时间(10s)的划分 */
				/* 例如25%就是10*25%就是2.5s */
				0%{
					transform: translate(0,0);
				}
				25%{
					transform: translate(1000px,0);
				}
				50%{
					transform: translate(1000px,500px);
				}
				75%{
					transform: translate(0,500px);
				}
				100%{
					transform: translate(0,0);
				}	
			}
			
			
			

			div {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				
				/* 调用动画名称 */
				/* 调用动画的名字一定要和定义的名字一样 */
				animation-name: move;
				
				/* 动画持续时间 */
				animation-duration: 10s;
			}
		</style>
	</head>
	<body>
		<h2>动画animation,可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果</h2>
		<h2>相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果</h2>
		<h2>动画的制作</h2>
		<ol>
			<li>定义动画 用@keyframes</li>
			<li>使用动画 调用动画用两个属性：animation-name; animation-duration</li>
		</ol>
		<!-- 一打开页面就有一个盒子从左到右 -->
	
		<ul>
			<li>0%是动画的开始,100%是动画的完成,这样的规则就是动画序列</li>
			<li>在@keyframes中规定某项动画序列，就能创建由当前样式逐渐改为新样式的动画效果</li>
			<li>动画是使元素从一种样式改变到另一种样式的效果，可以改变任意多的样式，任意多的次数</li>
			<li>用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%</li>
		</ul>
		
		<div></div>
	</body>
</html>
